<template>
    <div>
                       <!-- 导航 -->
                <Headers></Headers>
  <!-- 主题 -->
                <main>
                    <!-- 轮播图 -->
                    <div id="swiper">
                       <swiper class="sper" loop auto dots-position="center">
                            <swiper-item class="swiper-demo-img" v-for="(item, index) in datalist" :key="index"><img :src="item.img"></swiper-item>
                       </swiper>
                    </div>
                    <!-- 下方列表 -->
                    <fenlist :list="fendatalist"></fenlist>
                </main>
    </div>
</template>

<script>
import Headers from "../compontents/Headers.vue";
import fenlist from "../compontents/fenlist.vue";
import { Swiper,SwiperItem} from 'vux'
export default {
  data() {
      return{
  datalist: [
      {
        img: "/img/swiper/5.png",
      },
      {
        img: "/img/swiper/5.png",
      },
      {
        img: "/img/swiper/5.png",
      }
    ],
    fendatalist:[
        {
            backgroundimg:"/img/fenlist/11.png",
            headicon:"/img/fenlist/12.png",
            title:"Judy",
            lins:"淡淡的味却是最难忘的"
        },
        {
            backgroundimg:"/img/fenlist/11.png",
            headicon:"/img/fenlist/12.png",
            title:"Judy",
            lins:"淡淡的味却是最难忘的"
        },
        {
            backgroundimg:"/img/fenlist/11.png",
            headicon:"/img/fenlist/12.png",
            title:"Judy",
            lins:"淡淡的味却是最难忘的"
        },
        {
            backgroundimg:"/img/fenlist/11.png",
            headicon:"/img/fenlist/12.png",
            title:"Judy",
            lins:"淡淡的味却是最难忘的"
        }
    ]
      }
  
  },
  components: {
    Headers,
    Swiper,
    SwiperItem,
    fenlist,
  }
};
</script>

<style scoped>
#swiper {
  padding: 10px 3vw;
  border-radius: 10px;
  height:40vw;
}
.swiper-demo-img img{
    width: 100%;
    border-radius: 10px;
}
.sper{
    height: 40vw;
}
</style>